<style>
.el-table--border th.el-table__cell, .el-table__fixed-right-patch {
  background-color: #333333;
  color: #ffffff;
}

.table {
  margin-top: 10px;
}
</style>

<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }" style="font-size: 19px;">
        <i class="el-icon-s-home"></i> 个人中心
      </el-breadcrumb-item>
      <el-breadcrumb-item style="font-size: 17px">论坛管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div style="margin: 24px 0 12px 0">
      <el-divider></el-divider>
    </div>
    <el-button :type="this.showCurrentList==1?'warning':''" round @click="showUnauditedPage1()">未审核</el-button>
    <el-button :type="this.showCurrentList==2?'success':''" round @click="showAuditedPage1()">已审核</el-button>

    <!--  表格  -->
    <el-table
        empty-text="暂无数据，请再试一次！"
        class="table"
        ref="multipleTable"
        :data="forumData"
        border
        style="width: 100%">
      <el-table-column prop="id" header-align="center" align="center" label="ID" width="55"></el-table-column>
      <el-table-column prop="title" :show-overflow-tooltip="true" header-align="center" align="center"
                       label="标题" width="300"></el-table-column>
      <el-table-column prop="photo" header-align="center" align="center" label="图片" width="260">
        <template slot-scope="scope">
          <img
              style="width: 120px; height: 100px"
              :src="scope.row.photo<1?'':require('../img/user/'+scope.row.photo)"
              :alt="scope.row.photo<1?'未发布':'加载失败'">
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" header-align="center" align="center"
                       label="正文" width="230">
        <template slot-scope="scope">
          <span v-html="scope.row.content"></span>
        </template>
      </el-table-column>
      <el-table-column prop="username" header-align="center" align="center" label="发表人"
                       width="130"></el-table-column>
      <el-table-column prop="gmtCreate" header-align="center" align="center" label="发表日期"
                       width="200"></el-table-column>
      <el-table-column header-align="center" align="center" label="审核状态" width="100">
        <template slot-scope="scope">
          <el-button v-show="scope.row.auditStatus==0?true:false" type="warning" round size="small" disabled>未审核
          </el-button>
          <el-button v-show="scope.row.auditStatus==1?true:false" type="success" round size="small" disabled>通过
          </el-button>
          <el-button v-show="scope.row.auditStatus==2?true:false" type="danger" round size="small" disabled>违规
          </el-button>
        </template>
      </el-table-column>

      <!--操作-->
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-document" round size="small"
                     @click="openStandardDialog(scope.row)">详情
          </el-button>

          <!--    审核      -->
          <el-popconfirm
              @confirm="pass(scope.row)"
              confirm-button-text='确定'
              cancel-button-text='取消'
              icon="el-icon-info"
              icon-color="red"
              title="确定要通过此论坛吗？">
            <el-button slot="reference" type="success" icon="el-icon-edit" round size="small">通过</el-button>
          </el-popconfirm>
          <el-popconfirm
              @confirm="illegal(scope.row)"
              confirm-button-text='确定'
              cancel-button-text='取消'
              icon="el-icon-info"
              icon-color="red"
              title="确定要判该论坛违规吗？">
            <el-button slot="reference" type="danger" icon="el-icon-delete" round size="small">违规</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!--    论坛详情弹框    -->
    <el-dialog :visible.sync="StandardVisible" width="1000px">
      <div align="center">
        <h1 style="margin:0 auto;font-size: 30px">{{ forumStandard.title }}</h1>
        <span style="margin-right: 20px">发表人：{{ forumStandard.username }}</span>
        <span>{{ forumStandard.gmtCreate }}</span>
        <div align="left" v-html="forumStandard.content" style="font-size:20px; margin: 15px auto;white-space: pre-line"></div>
        <img v-show="forumStandard.photo<1?false:true"
             :src="forumStandard.photo<1||forumStandard.photo==null?'':require('../img/user/'+forumStandard.photo)"
             alt="加载失败" style="width: 600px;height: 350px;">
        <br>
        <br>
        <span>最近更新时间：{{ forumStandard.gmtModified }}</span>
      </div>
    </el-dialog>

    <!--  分页  -->
    <div class="block" align="center" style="margin-top: 10px;margin-bottom: 15px">
      <el-pagination
          v-show="UnauditedShow"
          background
          @current-change="handleCurrentChange"
          :current-page.sync="Unaudited.page"
          :page-size="Unaudited.pageSize"
          layout="prev, pager, next, jumper"
          :total="this.totalCount">
      </el-pagination>
      <el-pagination
          v-show="AuditedShow"
          background
          @current-change="handleCurrentChange1"
          :current-page.sync="Audited.page"
          :page-size="Audited.pageSize"
          layout="prev, pager, next, jumper"
          :total="this.totalCount">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showCurrentList: 0,
      forumStandard: {},
      StandardVisible: false,
      UnauditedShow: false,
      AuditedShow: false,
      forumData: [],
      totalCount: 0,
      Unaudited: {
        pageSize: 4,
        page: 1,
      },
      Audited: {
        pageSize: 4,
        page: 1,
      }
    }
  },
  methods: {
    //展示已审核论坛第一页
    showAuditedPage1() {
      this.Audited.page = 1;
      this.loadListAudited();
    },
    //展示未审核论坛第一页
    showUnauditedPage1() {
      this.Unaudited.page = 1;
      this.loadListUnaudited();
    },

    //展示当前列表
    showCurrentForumList() {
      if (this.showCurrentList == 1) {
        this.showCurrentList = 0;
        this.loadListUnaudited();
      } else if (this.showCurrentList == 2) {
        this.showCurrentList = 0;
        this.loadListAudited();
      }
    },

    //提交通过审核
    pass(forum) {
      let url = 'http://localhost:8081/forum/' + forum.id + '/' + 1;
      console.log('提交审核请求的url是' + url);
      this.axios.create({'headers': {'Authorization': localStorage.getItem('adminJwt')}})
          .post(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.$notify.success({
            title: '提示',
            message: '提交审核成功',
            showClose: true,
            position: 'top-right'
          });
          this.showCurrentForumList();
        } else {
          this.$notify.warning({
            title: '提示',
            message: responseBody.message,
            showClose: true,
            position: 'top-right'
          });
          this.showCurrentForumList();
        }
      })
    },

    //提交违规审核
    illegal(forum) {
      let url = 'http://localhost:8081/forum/' + forum.id + '/' + 2;
      console.log('提交审核请求的url是' + url);
      this.axios.create({'headers': {'Authorization': localStorage.getItem('adminJwt')}})
          .post(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.$notify.success({
            title: '提示',
            message: '提交审核成功',
            showClose: true,
            position: 'top-right'
          });
          this.showCurrentForumList();
        } else {
          this.$notify.warning({
            title: '提示',
            message: responseBody.message,
            showClose: true,
            position: 'top-right'
          });
          this.showCurrentForumList();
        }
      })
    },

    //展示论坛详情
    openStandardDialog(forum) {
      let url = 'http://localhost:8081/forum/null/' + forum.id + '/select';
      console.log('论坛详情请求的url是' + url);
      this.axios.create({'headers': {'Authorization': localStorage.getItem('adminJwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.StandardVisible = true;
          this.forumStandard = responseBody.data;
        } else {
          this.$notify.warning({
            title: '提示',
            message: responseBody.message,
            showClose: true,
            position: 'top-left'
          });
          this.showCurrentForumList();
        }
      })
    },

    //展示论坛未审核列表
    loadListUnaudited() {
      this.showCurrentList = 1;
      this.UnauditedShow = true;
      this.AuditedShow = false;
      let url = 'http://localhost:8081/forum/' + this.Unaudited.page + '/' + this.Unaudited.pageSize + '/ListUnaudited';
      console.log('展示论坛未审核列表请求的url是' + url);
      this.axios.create({'headers': {'Authorization': localStorage.getItem('adminJwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.forumData = responseBody.data.list;
          this.totalCount = responseBody.data.totalCount;
        } else {
          this.$notify.warning({
            title: '提示',
            message: responseBody.message,
            showClose: true,
            position: 'top-left'
          });
          this.loadListAudited();
        }
      })
    },

    //展示论坛已审核列表(包括违规)
    loadListAudited() {
      this.AuditedShow = true;
      this.UnauditedShow = false;
      let url = 'http://localhost:8081/forum/' + this.Audited.page + '/' + this.Audited.pageSize + '/ListAudited';
      console.log('展示论坛已审核列表(包括违规)请求的url是' + url);
      this.axios.create({'headers': {'Authorization': localStorage.getItem('adminJwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.showCurrentList = 2;
          this.forumData = responseBody.data.list;
          this.totalCount = responseBody.data.totalCount;
        } else {
          this.$notify.warning({
            title: '提示',
            message: responseBody.message,
            showClose: true,
            position: 'top-left'
          });
        }
      })
    },

    handleCurrentChange(val) {
      this.Unaudited.page = val;
      this.showCurrentForumList();
      console.log(`当前页: ${val}`);
    },
    handleCurrentChange1(val) {
      this.Audited.page = val;
      this.showCurrentForumList();
      console.log(`当前页: ${val}`);
    },
  },
  mounted() {
    this.loadListUnaudited();
  }
}
</script>